import MyNavBar from '@/components/MyNavBar'
import { useNavigate } from 'react-router-dom'
import { useState } from "react";
import './index.scss'
import classNames from 'classnames';
import { Input,Button,CalendarPicker,Toast } from 'antd-mobile'
import { CalendarOutline } from 'antd-mobile-icons'
import {billType} from '@/utils/constant'
import Icon from '@/components/Icon'
import {addBillData} from '@/store/modules/billSlice'
import { useDispatch } from 'react-redux';
import dayjs from 'dayjs';

const Add = () => {
    const navigate = useNavigate()
    const back = ()=> {
        navigate(-1)
    }

    const [type,setType] = useState('pay')
    const [money, setMoney] = useState('')
    const [useFor,setUseFor] = useState('')
    const [dateVisible,setDateVisible] = useState(false)
    const [date,setDate] = useState(new Date())
    const min = new Date()
    min.setDate(1)
    min.setMonth(min.getMonth() - 1)

    const changeType = (type) => {
        setType(type)
        setUseFor('')
    }
 
    const handleSelectType = (data) => {
        setUseFor(data.type)
    }

    const onConfirmDate = (date) => {
        setDateVisible(false)
        setDate(date)

    }

    const dispatch = useDispatch()

    const onSave = () => {
        if(!type || !money || !useFor) {
            Toast.show({
                content: '账单类型/金额/类型不能为空！',
                icon: 'fail',
            })
            return
        }
        const data = {
            type,
            money: Number(money),
            useFor,
            date: date
        }
        dispatch(addBillData(data))
        Toast.show({
            content: '保存成功！',
            icon: 'success',
        })
        navigate('/')

    }
    return (
        <div className="addWrap">
            <MyNavBar onBack={back} title="记一笔"></MyNavBar>
            <div className="typeWrap">
                <div className={classNames('typeBtn',type === 'pay' && 'selectTypeBtn')} onClick={() => changeType('pay')}>支出</div>
                <div className={classNames('typeBtn',type === 'income' && 'selectTypeBtn')} onClick={() => changeType('income')}>收入</div>
            </div>
            <div className="inputWrap">
                <div className="calendarWrap" onClick={() =>setDateVisible(true) }>
                    <CalendarOutline className="calendarIcon" />
                    <span className="calendarText">{dayjs(date).format('YYYY-MM-DD')}</span>
                </div>
                <Input
                    placeholder='0.00'
                    value={money}
                    clearable
                    type="number"
                    onChange={val => {
                        setMoney(val)
                    }}
                />
                 <CalendarPicker
                    visible={dateVisible}
                    selectionMode='single'
                    defaultValue={date}
                    min = {min}
                    max={new Date()}
                    onClose={() => setDateVisible(false)}
                    onMaskClick={() => setDateVisible(false)}
                    onConfirm = {onConfirmDate}
                />
            </div>
            <div className="list">
                {billType[type].map(item => (
                    <div className="type" key={item.type}>
                        <div className="typeTitle">{item.name}</div>
                        <div className="typeList">
                            {
                                item.list.map(item1 => (
                                    <div key={item1.type}
                                        className={classNames("typeItem", useFor === item1.type && 'typeSelect')} 
                                        onClick={() => handleSelectType(item1)}>
                                        <Icon className="typeIcon" type={item1.type} />
                                        <span className="typeName">{item1.name}</span>
                                    </div>
                                ))
                            }
                        </div>
                    </div>
                ))}
            </div>
            <Button color='primary' fill='solid' onClick={onSave}>保存</Button>
        </div>
    )
}

export default Add